<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style type="text/css">
		body{
		    width: 100%;
		    height: 680px;
		    background-color: #000;
		    background-image: gradient(radial,
		                        50% 400, 1,
		                        50% 400, 400,
		                        from(rgba(255, 255, 255, 0.3)),
		                        to(rgba(255, 255, 255, 0)));
		    background-repeat: no-repeat;
		    overflow: hidden;
		    transition: all 2s linear;
		}
		#wind{
		    width: 100%;
		    height: 100%;
		    -webkit-perspective: 800;
		    -webkit-perspective-origin: 50% 50%;
		}

		 /*初始 输入框 未翻转*/
		#plane.front {   
		    transform: rotateY(0deg);
		}
		/*点击之后 翻转  背景色渐变*/	 
		#plane {
		    /* z-index:3; */
		    background: rgba(255, 255, 255, 0.15);
		    *background: hsl(0, 0%, 88%);
		    transform: rotateY(-180deg);
		    position: relative;
		    box-sizing: border-box;
		    padding: 20px;
		    text-align: center;
		    backface-visibility: hidden;
		    width: 400px;
		    height: 260px;
		    top: 240px;
		    transition: all 0.8s ease-in-out;
		    margin: auto;
		}
		 /*文本框*/
		.message {
		    width: 100%;
			max-width:360px;
			min-height:100px;
		    padding: 10px;
		    box-sizing: border-box;
		    height: 140px;
		    font-smoothing: subpixel-antialiased;
		    font-size: 18px;
		    /* font-family: "Microsoft YaHei",Helvetica, Arial, Verdana; */
		    line-height: 20px; 
            color: transparent;
            -webkit-text-stroke: 1px black;
            letter-spacing: 0.04em;
		}
		 /*btn 点击效果*/
		.send {
		    transition: all 0.3s ease-in-out;
		    border: 2px solid hsl(194, 100%, 72%);
		    margin: 15px 0;
		    padding: 10px;
		    outline: none;
		    font-size: 18px;
		    cursor: pointer;
		    font-family: "Microsoft YaHei";
		    background-color: hsl(0, 0%, 94%);
		    border-radius:(4px);
		}
		 
		.send:active {
		    transform: scale(0.85);
		    transition: all 10ms ease-in-out;
		    background-color: hsl(0, 0%, 85%);
		    border: 2px solid hsl(194, 30%, 55%);
		}
		
		/*关闭按钮*/
		#plane_bottom {
		    position: absolute;
		    right: 7px;
		    bottom: 0;
		    width: 30px;
		    height: 30px;
		}
		 
		#plane_close{
		    color: #FFF;
		    text-decoration: none;
		}
		 /*飞机纸*/
		#wind_container {
		    perspective: 600;
		    perspective-origin: 200px 131px;
		    transform-style: preserve-3d;
		    transition: all 0.8s ease-in-out;
		    backface-visibility: hidden;
		    position: relative;
		    width: 400px;
		    height: 260px;
		    /* top: 0px;
		    text-align: center;
		    display: block; */
		    margin: auto;
		}	

		/* 翻转至正面 */
		#wind_container.beginning {
		    transform: rotateY(180deg);
		}

			
		#left-wing,#right-wing {
		    transform-style: preserve-3d;
		    width: 200px;
		    height: 260px;
		    display: block;
		    position: absolute;
		    top: 0px;
		    transition: all 1s ease-in-out;
		}
		 /*区分  左右  */
		#left-wing {
		    transform: rotateZ(0deg);
		    transform-origin: 100% 50% 0;
		    left: 0;
		}
		 
		#right-wing {
		    transform: rotateZ(0deg);
		    transform-origin: 0% 50%;
		    left: 199px;
		}
		/*飞机 机翼左右公共样式*/
		.wing {
		    position: absolute;
		    transform-origin: 0 0 0;
		    perspective: 1;
		    perspective-origin: 50% 50%;
		    backface-visibility: hidden;
		    transition: all 1.3s linear;
		    box-sizing: border-box;
		    margin: 0;
		    padding: 0;
		    background: none;
		    border: none;
		    border-top: 240px solid hsla(0, 0%, 0%, 0);
		    border-bottom: 0px solid hsla(0, 0%, 0%, 0);
		    border-right: 100px solid hsl(0, 0%, 88%);
		    width: 0;
		    height: 0;
		    bottom: 0;
		}
		
		/*绘制  飞机2d 雏形*/
		.wing1 {
			transform-origin: 100% 100%;
		    transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);/*2D图像的偏移 旋转*/
		}
		 
		.wing2 {
		    transform: rotateZ(22.62deg);
		    transform-origin: 100% 100%;
		    border-left: 100px solid hsl(0, 0%, 88%);
		    border-right: none;
		    left: 100px;
		}
		 
		.wing3 {
		    transform: rotateZ(-22.62deg);
		    transform-origin: 0% 100%;
		    border-right: 100px solid hsl(0, 0%, 88%);
		}
		 
		.wing4 {
		    transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) skewY(22.62deg);
		    transform-origin: 0% 100%;
		    border-right: none;
		    border-left: 100px solid hsl(0, 0%, 88%);
		    left: 100px;
		}
		
		/*绘制被翻折部分  机翼 */
		
		.curvable.top_left {
		    transform-origin: 100px 112px;
		    transition-delay: 1300ms;
		    width: 0;
		    height: 0;
		    top: 0;
		    border-right: 202px solid hsla(0, 0%, 0%, 0);
		    border-bottom: 202px solid hsla(0, 0%, 0%, 0);
		    border-top: 223px solid hsl(0, 0%, 88%);
		}
		 
		.curvable.top_right {
		    right: 0;
		    border-left: 202px solid hsla(0, 0%, 0%, 0);
		    border-bottom: 202px solid hsla(0, 0%, 0%, 0);
		    border-top: 224px solid hsl(0, 0%, 88%);
		    transform-origin: 96px 112px;
		    transition-delay: 1650ms;
		}

		 /* 补全 折叠尾翼  区域  */
		 .bottom_left.curvable {
		    transform-origin: 109px 0;
		    transition-delay: 2100ms;
		    width: 109px;
		    height: 38px;
		    background: hsl(0, 0%, 88%);
		    bottom: 0;
		    left: 0;
		}

		.bottom_right.curvable {
		    transform-origin: 0px 0;
		    transition-delay: 2450ms;
		    width: 109px;
		    height: 38px;
		    background: hsl(0, 0%, 88%);
		    bottom: 0;
		    right: 0;
		 
		}
		/*补全 折叠尾翼 剩余 三角区域*/
		.bottom_left.curvable:after {
		    position: absolute;
		    content: "";
		    border-right: 92px solid hsla(0, 0%, 0%, 0);
		    border-bottom: 39px solid hsl(0, 0%, 88%);
		    border-top: 37px solid hsla(0, 0%, 0%, 0);
		    left: 109px;
		    bottom: 0;
		}
		 
		.bottom_right.curvable:after {
		    position: absolute;
		    content: "";
		    border-left: 92px solid hsla(0, 0%, 0%, 0);
		    border-bottom: 39px solid hsl(0, 0%, 88%);
		    border-top: 37px solid hsla(0, 0%, 0%, 0);
		    left: -92px;
		    bottom: 0;
		}
		/****************************/
		/****此处开始配合js*****/
		/*折叠效果*/
		.curvable {
		    transition: transform 800ms ease-out;
		    backface-visibility: hidden;
		    position: absolute;
		    background-color: transparent;
		    z-index: 0;
		    width: 0;
		}
		/* 折叠效果（左机翼、左尾翼） */
		.top_left.curvable.curved {
		    transform: rotate3d(1,-1.11,0,180deg);
		}
		 
		.bottom_left.curvable.curved {
		    transform: rotate3d(2.4867,1,0,-180deg);
		}
		 /* 折叠效果（右机翼、右尾翼）*/
		.top_right.curvable.curved {
		    transform: rotate3d(1,1.11,0,180deg);
		}

		.bottom_right.curvable.curved {
		    transform: rotate3d(-2.4867,1,0,180deg);
		}
		 
		/* 平放一整个飞机 */
		#wind_container.hover {
		    transform: rotateX(54deg) rotateY(-10deg) rotateZ(25deg);
		    transition-delay: 0.5s;
		}
		/*放平之后 左侧整体倾斜 （体现折叠效果）*/
		#wind_container.hover #left-wing {
		    transform: rotateY(60deg);
		}
		 
		#wind_container.hover #right-wing {
		    transform: rotateY(-60deg);
		}
		/* 3d视觉中放平 左侧机翼*/
		#wind_container.hover .wing1 {
		    transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) rotateY(-60deg) skewY(-22.62deg);
		    border-right: 100px solid hsl(0, 0%, 95%);
		}
		 /*左侧 飞机手持部位透明度降低*/
		#wind_container.hover .wing2 {
		    border-left: 100px solid hsl(0, 0%, 85%);
		}

		/* 3d视觉中放平 右侧机翼*/
		#wind_container.hover .wing4 {
		    transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) rotateY(60deg) skewY(20deg);
		    border-left: 100px solid hsl(0, 0%, 95%);
		}

		/*右侧 飞机手持部位透明度降低*/
		#wind_container.hover .wing3 {
		    border-right: 100px solid hsl(0, 0%, 71%);
		}
		
		/*机翼 折叠效果（右机翼、右尾翼） 之后 多余部分隐藏掉*/
		#wind_container.hover .curved {
		    display: none;
		}

		/* #wind_container.hover .wing {
		    backface-visibility: visible;
		} */
		 
		
		 /* 飞机后退助跑 */
		#wind_container.hover.fly_away_first {
			transform: translatex(-100px) translateZ(300px) rotateX(42deg) rotateY(-11deg) rotateZ(27deg);
		    transition-delay: 0;
		    transition-duration: 0.4s;
		    transition-timing-function: ease-out;
		}
		 /* 飞机向前飞翔至消失 */
		#wind_container.hover.fly_away_first.fly_away {
		    transform: translateX(600px) translateY(-400px) translateZ(-5000px) rotateX(66deg) rotateY(-12deg) rotateZ(36deg);
		    transition: transform 2s ease-out, opacity 1.5s 0.5s linear;
		    opacity: 0;
		}		 

	</style>
	<!--[if IE]> 
这段文字只在IE浏览器显示 
<![endif]--> 
</head>
<body>
<div id="wind">
    <div id="plane" class="front">  
		<form action="#">
			<textarea class="message">滚TM的Dream....自己慢慢熬吧!!!</textarea>
		</form>
        <button class="send"> Go </button> <br/>
        <div id="plane_bottom">
			<a href="javascript:;" id="plane_close"> X </a>
        </div>
    </div>
 
    <div id="wind_container" class="beginning">
        <div id="left-wing">
            <div class="top_left curvable"> </div>
            <div class="bottom_left curvable"> </div>
            <div class="wing wing1"></div>
            <div class="wing wing2"></div>
        </div>
 
        <div id="right-wing">
            <div class="top_right curvable"> </div>
            <div class="bottom_right curvable"> </div>
            <div class="wing wing3"></div>
            <div class="wing wing4"></div>
        </div>
 
    </div>
 
</div>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
    // 纸飞机
    // 起飞
    $('.send').click(function() {
        // 步骤一：隐藏面板、显示飞机、完成折叠效果
        setTimeout(function() {
            // 隐藏信息面板
            $('#plane').removeClass('front');
            // 翻转至正面
            $('#wind_container').removeClass('beginning');
            // 折叠效果（左翼、右翼）
            $('.curvable').addClass('curved');
            // 颜色变换
            $("body").css({"background-color": "#54575A"});
            // 步骤二：平放飞机
            setTimeout(function() {
                $('#wind_container').addClass('hover');
                $("body").css({"background-color": "#AD8BD8"});
                //步骤三：飞机后退助跑
                setTimeout(function() {
                    $('#wind_container').addClass('fly_away_first');
                    $("body").css({"background-color": "#6E99C4"});
                    // 步骤四：飞机向前飞翔至消失
                    setTimeout(function() {
                        $('#wind_container').addClass('fly_away');
                        $("body").css({"background-color": "#3F9BFF"});
                        // 步骤五：飞机复位
                        setTimeout(function(){
                          $('#plane').addClass('front');
                          $('#wind_container').removeClass('fly_away fly_away_first hover').addClass('beginning');
                          $('.curvable').removeClass('curved');
                          $("body").css({"background-color": "#000"});
                        },3000);
                    }, 600);
                }, 2000);
            }, 2800);
        }, 200);
    });
    // 关闭弹窗
    $("#plane_close").click(function(){
        $("#wind").fadeOut(200);
    });
	});
</script>
</body>
</html>